<?php
    use User\Model\QuestionnaireModel;
?>
<style>
    .table>thead>tr>th{text-align: center}
    .table>tbody>tr>td{vertical-align: middle; text-align: center; border-top:0px;}
    .title{width:65%;display:inline-block}
    .upload-title-image img{margin-top:-35px}
    .add-option{margin-left:100px;margin-bottom:20px}
    .add-extra{margin-left:10px;margin-bottom:20px}
    .option-upload{width:30px;height:30px;margin-top:-10px;margin-left:5px;opacity: 0;position:absolute;z-index:1}
    .option-image{margin-top:-15px;margin-left:-15px;position:absolute}
</style>
<div id="page-wrapper">
    <div class="row">
        <div class="col-lg-12">
            <h3 class="page-header">
                <present name="question">编辑<else/>新建</present>主干题目
            </h3>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-12">
            <div class="panel panel-default">
                <div class="panel-body">
                    <form role="form" class="form-horizontal" action="/User/Questionnaire/updateQuestion" method="post" enctype="multipart/form-data" onsubmit="return formcheck();">
                        <input type="hidden" name="id" value="{$question['id']}">
                        <input type="hidden" name="questionnaire_id" value="{$questionnaire_id}">
                        <div class="tab-content">
                            <div class="tab-pane active" id="basic">
                                <div class="form-group" >
                                    <label class="col-lg-1 col-sm-2 control-label"></label>
                                    <div class="col-lg-10">
                                        <input class="form-control title" name="question_title" title="请输入标题" value="{$question['title']}" placeholder="请输入标题">
                                    </div>
                                </div>
                                <div class="form-group" >
                                    <label class="col-lg-1 col-sm-2 control-label"></label>
                                    <div class="col-lg-10">
                                        <input type="radio" name="is_single" value="1" <?php
                                        if((!empty($question) && ($question['is_single'] == 1)) || empty($question)){
                                            echo " checked ";
                                        }?>>单选
                                        <input type="radio" name="is_single" value="2" <?php
                                     if(!empty($question) && ($question['is_single'] == 2)){
                                            echo " checked ";
                                        }?>>多选
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-lg-1 col-sm-2 control-label"></label>
                                    <div class="col-lg-9">
                                        <table class="table">
                                            <thead>
                                            <tr>
                                                <th style="width:35%">选项文字</th>
                                                <th style="width:10%">图片</th>
                                                <th style="width:10%">分值</th>
                                                <th style="width:15%">正确答案</th>
                                                <th style="width:30%">操作</th>
                                            </tr>
                                            </thead>
                                            <tbody id="option-body">
                                            <volist name="question_options" id="option">
                                                <tr class="option-id-{$option.id}">
                                                    <input type="hidden" name="optionid[]" value="{$option.id}">
                                                    <if condition="$option.is_extra eq QuestionnaireModel::EXTRA_OFF">
                                                        <td><input class="form-control" type="text" name="title[]" value="{$option.title}" placeholder="选项"></td>
                                                        <td>
                                                            <input type="hidden" name="title_image[]" value="{$option.title_image}">
                                                            <input type="file" class="option-upload" onchange="uploadImage(this, '', '', '', false, true);" accept="image/gif,image/jpeg,image/jpg,image/png">
                                                            <img src="{$option.title_image}" class="option-image" width="30" height="30">
                                                        </td>
                                                    <else/>
                                                        <td colspan="2"><input class="form-control" type="text" name="title[]" value="{$option.title}" placeholder="选项"></td>
                                                    </if>
                                                    <td><input class="form-control" type="text" name="score[]" value="{$option.score}" placeholder="0"></td>
                                                    <td>
                                                        <input type="radio" onclick="correctAnswer(this);" <if condition="$option.correct_answer eq QuestionnaireModel::ANSWER_CORRECT">checked="checked"</if>>
                                                        <input type="hidden" class="correct_option" name="correct_option[]" value="{$option.correct_answer}">
                                                    </td>
                                                    <td>
                                                        <if condition="$option.is_extra eq QuestionnaireModel::EXTRA_OFF">
                                                            <button type="button" onclick="removeOptions({$option['id']});" class="btn btn-default">删除</button>
                                                        <else/>
                                                            <button type="button" onclick="removeOptions({$option['id']});" class="btn btn-info">删除自定义回答</button>
                                                        </if>
                                                        <button type="button" onclick="branchOptions({$option['id']});" class="btn btn-default">分支题目</button>
                                                    </td>
                                                </tr>
                                            </volist>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                                <button type="button" class="btn btn-default add-option">新增选项</button>
                                <button type="button" class="btn btn-info add-extra">新增自定义回答</button>
                            </div>
                        </div>
                        <label class="col-lg-1 col-sm-2 control-label"></label>
                        <button type="submit" class="btn btn-primary">提交</button>
                        <button type="button" class="btn btn-default" onclick="history.go(-1)">返回列表</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<div aria-hidden="true" aria-labelledby="myModalLabel1" role="dialog" tabindex="-1" id="modal1" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button aria-hidden="true" data-dismiss="modal" class="close" type="button">×</button>
                <h4 class="modal-title">分支题目</h4>
            </div>
            <div class="modal-body">
                <table class="table">
                    <thead>
                    <tr>
                        <th style="width:15%">选择</th>
                        <th style="width:85%">分支题目</th>
                    </tr>
                    </thead>
                    <tbody>
                        <volist name="branch_questions" id="bq">
                        <tr>
                            <td><input type="checkbox" class="branch-{$bq.id}" name="branch_ids" value="{$bq.id}"></td>
                            <td>{$bq.title}</td>
                        </tr>
                        </volist>
                    </tbody>
                </table>
            </div>
            <div class="modal-footer">
                <input type="hidden" class="question_option_id" value="-1">
                <button type="button" class="btn btn-info" onclick="updateBranchs();">确定</button>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript" src="/Public/js/common/check-upload-file.js"></script>
<script type="text/javascript">
    function branchOptions(option_id){
        $(".question_option_id").val(option_id);
        $("input[name=branch_ids]").each(function(){
            $(this).prop("checked", false);
        });
        $('#modal1').modal('show');
        $.ajax({
            data: {option_id: option_id},
            dataType: 'json',
            url: '/User/Questionnaire/branchOptions',
            type: 'get',
            success: function (res) {
                if(res["status"] === 1){
                    var branch_list = res["branch_list"];
                    for(var i in branch_list){
                        $(".branch-"+branch_list[i]).prop("checked", true);
                    }
                }
            }
        });
    }

    function updateBranchs(){
        var question_option_id = $(".question_option_id").val();
        var ids = "";
        $("input[name=branch_ids]").each(function(){
            if($(this).prop("checked")){
                if(ids){
                    ids += ","+$(this).val();
                }else{
                    ids += $(this).val();
                }
            }
            $(this).prop("checked", false);
        });
        $.ajax({
            data: {ids: ids, question_option_id: question_option_id},
            dataType: 'json',
            url: '/User/Questionnaire/updateBranchs',
            type: 'get',
            success: function (res) {
                alert(res["info"]);
            }
        });
        $('#modal1').modal('hide');
    }

    function formcheck(){
        var ret = true;
        var question_title = $("input[name=question_title]").val();
        if(!question_title){
            alert("请输入标题");
            ret = false;
            return ret;
        }
        if(question_title.length >= 100){
            alert("标题长度不能超过100个字");
            ret = false;
            return ret;
        }
        return ret;
    }

    $(".add-option").click(function(){
        var questionnaire_id = $("input[name=questionnaire_id]").val();
        var question_id = $("input[name=id]").val();
        var question_title = $("input[name=question_title]").val();
        var type = "<?php echo QuestionnaireModel::TYPE_MAIN; ?>";
        var answer_wrong = '<?php echo QuestionnaireModel::ANSWER_WRONG?>';
        var is_extra = '<?php echo QuestionnaireModel::EXTRA_OFF?>';
        if(!question_title){
            alert("请输入标题");
            return false;
        }
        var option_length = parseInt($("#option-body tr").length) + 1;
        var html = "";
        $.ajax({
            data: {question_id: question_id, question_title: question_title, type: type,
                questionnaire_id: questionnaire_id, is_extra: is_extra},
            dataType: 'json',
            url: '/User/Questionnaire/addOption',
            type: 'get',
            success: function (res) {
                if(res["status"] === 1){
                    $("input[name=id]").val(res["question_id"]);
                    var option_id = res["option_id"];
                    html += '<tr class="option-id-'+option_id+'">';
                    html += '   <input type="hidden" name="optionid[]" value="'+option_id+'">';
                    html += '   <td><input class="form-control" type="text" name="title[]" value="" placeholder="选项"></td>';
                    html += '   <td><input type="hidden" name="title_image[]" value=""><input type="file" class="option-upload" onchange="uploadImage(this, [], [], 0, false, true);" accept="image/gif,image/jpeg,image/jpg,image/png"><img src="" class="option-image" width="30" height="30"></td>';
                    html += '   <td><input class="form-control" type="text" name="score[]" value="" placeholder="0"></td>';
                    html += '   <td><input type="radio" onclick="correctAnswer(this);" value=""><input type="hidden" class="correct_option" name="correct_option[]" value="'+answer_wrong+'"></td>';
                    html += '   <td><button type="button" onclick="removeOptions('+option_id+')" class="btn btn-default">删除</button> <button type="button" onclick="branchOptions('+option_id+')" class="btn btn-default">分支题目</button></td>';
                    html += '</tr>';
                    $("#option-body").append(html);
                }else{
                    alert(res['info']);
                }
            }
        });
    })

    $(".add-extra").click(function(){
        var questionnaire_id = $("input[name=questionnaire_id]").val();
        var question_id = $("input[name=id]").val();
        var question_title = $("input[name=question_title]").val();
        var type = "<?php echo QuestionnaireModel::TYPE_MAIN; ?>";
        var answer_wrong = '<?php echo QuestionnaireModel::ANSWER_WRONG?>';
        var is_extra = '<?php echo QuestionnaireModel::EXTRA_ON?>';
        if(!question_title){
            alert("请输入标题");
            return false;
        }
        var option_length = parseInt($("#option-body tr").length) + 1;
        var html = "";
        $.ajax({
            data: {question_id: question_id, question_title: question_title, type: type,
                questionnaire_id: questionnaire_id, is_extra: is_extra},
            dataType: 'json',
            url: '/User/Questionnaire/addOption',
            type: 'get',
            success: function (res) {
                if(res["status"] === 1){
                    $("input[name=id]").val(res["question_id"]);
                    var option_id = res["option_id"];
                    html += '<tr class="option-id-'+option_id+'">';
                    html += '   <input type="hidden" name="optionid[]" value="'+option_id+'">';
                    html += '   <td colspan="2"><input class="form-control" type="text" name="title[]" value="" placeholder="选项"></td>';
                    // html += '   <td><input type="hidden" name="title_image[]" value=""><input type="file" class="option-upload" onchange="uploadImage(this, [], [], 0, false, true);" accept="image/gif,image/jpeg,image/jpg,image/png"><img src="" class="option-image" width="30" height="30"></td>';
                    html += '   <td><input class="form-control" type="text" name="score[]" value="" placeholder="0"></td>';
                    html += '   <td><input type="radio" onclick="correctAnswer(this);" value=""><input type="hidden" class="correct_option" name="correct_option[]" value="'+answer_wrong+'"></td>';
                    html += '   <td><button type="button" onclick="removeOptions('+option_id+')" class="btn btn-info">删除自定义回答</button> <button type="button" onclick="branchOptions('+option_id+')" class="btn btn-default">分支题目</button></td>';
                    html += '</tr>';
                    $("#option-body").append(html);
                }else{
                    alert(res['info']);
                }
            }
        });
    })

    function uploadImage(c, types, size, kb, isCheck, isImage){
        var img = c.files[0];
        var _this = $(c);
        var url = "/User/Questionnaire/uploadFile";
        checkFile(_this, img, types, size, kb, isCheck, isImage, url);
    }

    function correctAnswer(c){
        var answer_correct = '<?php echo QuestionnaireModel::ANSWER_CORRECT?>';
        var answer_wrong = '<?php echo QuestionnaireModel::ANSWER_WRONG?>';
        var old_value = $(c).next().val();
        if(old_value === answer_correct){
            $(c).removeAttr("checked");
            $(event.target).next().val(answer_wrong);
        }else{
//            $(".correct_option").val(answer_wrong);
            $(event.target).next().val(answer_correct);
        }
    }

    function removeOptions(id){
        $.ajax({
            data: {id: id},
            dataType: 'json',
            url: '/User/Questionnaire/deleteOption',
            type: 'get',
            success: function (res) {
                if(res["status"] === 1){
                    $(".option-id-"+id).remove();
                }else{
                    alert(res['info']);
                }
            }
        });
    }
</script>